<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import type { IRouter } from '@/stores/modules/types'
const userStore = useUserStore()
const router = useRouter()
// defineOptions({ name: 'NewView' })
const route = useRoute()
const tags = computed(() => userStore.tags)
// 点击tab切换菜单
const handleMenu = (tag: IRouter) => {
  router.push(tag.name)
  userStore.selectMenu(tag)
}
// 关闭标签页
const handleClose = (tag: IRouter, idx: number) => {
  userStore.updateTags(tag)
  // 如果关闭的是当前页
  if (route.name === tag.name) {
    userStore.selectMenu(tags.value[idx - 1])
    router.push(tags.value[idx - 1].name)
  }
}
</script>

<template>
  <div class="tags">
    <el-tag
      v-for="(tag, index) in tags"
      :closable="tag.name !== 'home'"
      :effect="route.name === tag.name ? 'dark' : 'plain'"
      :key="tag.name"
      @click="handleMenu(tag)"
      @close="handleClose(tag, index)"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<style lang="scss" scoped>
.tags {
  margin: 20px 0 0 20px;
}

.el-tag {
  margin-right: 10px;
  cursor: pointer;
}
</style>
